<style scoped>
.expand-row{
  margin-bottom: 16px;
}
</style>
<template>
  <div>
    <Row class="expand-row">
      <Col span="4">
        <span class="expand-key">违规总数: </span>
        <span class="expand-value">{{ row.sum }}</span>
      </Col>
      <Col span="4">
        <span class="expand-key">打电话: </span>
        <span class="expand-value">{{ row.phone }}</span>
      </Col>
      <Col span="4">
        <span class="expand-key">打哈欠: </span>
        <span class="expand-value">{{ row.yawn }}</span>
      </Col>
      <Col span="4">
        <span class="expand-key">吃东西: </span>
        <span class="expand-value">{{ row.eat }}</span>
      </Col>
      <Col span="4">
        <span class="expand-key">闭眼: </span>
        <span class="expand-value">{{ row.shutEye }}</span>
      </Col>
      <Col span="4">
        <span class="expand-key">抽烟: </span>
        <span class="expand-value">{{ row.smoke }}</span>
      </Col>
    </Row>
    <Row>
      <Col span="4">
        <span class="expand-key">酒驾: </span>
        <span class="expand-value">{{ row.drunken }}</span>
      </Col>
      <Col span="4">
        <span class="expand-key">双手离开方向盘: </span>
        <span class="expand-value">{{ row.steeringWheel }}</span>
      </Col>
      <Col span="4">
        <span class="expand-key">手持异物: </span>
        <span class="expand-value">{{ row.handing }}</span>
      </Col>
      <Col span="4">
        <span class="expand-key">每百公里违规数: </span>
        <span class="expand-value">{{ row.violationsOf100 }}</span>
      </Col>
      <Col span="4">
        <span class="expand-key">安全驾驶总距离: </span>
        <span class="expand-value">{{ row.drivingDistance }}</span>
      </Col>
    </Row>
    <Row>
      <Col span="24">
        <div>
          &nbsp;&nbsp;
        </div>
      </Col>
    </Row>
    <Row>
      <Col span="12">
        <Card shadow>
          <chart-pie style="height: 300px;" :value="row.pieData" text="违规行为分析"></chart-pie>
        </Card>
      </Col>
      <Col span="12">
        <Card shadow>
          <chart-bar style="height: 300px;" :value="row.barData" text="违规时间分布"/>
        </Card>
      </Col>
    </Row>
  </div>
</template>
<script>
import { ChartPie,ChartBar } from '_c/charts'
export default {
  name: "data_statistics",
  components: {
    ChartPie,
    ChartBar
  },
  props: {
    row: Object
  },
};
</script>
